<template>
	<div class="mynav">
		<div class="nav" v-show="footernav">
			<div class="nav-left">
				免费咨询<span class="person-phone"></span>
				<span class="person-phone-bg"></span>
			</div>
			<div class="nav-right">
				<span class="gotop1"></span>
				<span class="gotop2" @click="backTop"></span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'mynav',
		data() {
			return{
				footernav:false
			}
		},
		mounted() {
			window.addEventListener('scroll', this.handleScroll)
		},
		methods: {
			handleScroll() {
				var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
				if(scrollTop>=200){
					this.footernav = true;
				}else{
					this.footernav = false;
				}
			},
			backTop:function(){
				document.documentElement.scrollTop = document.body.scrollTop = 0;
			}
		}
	}
</script>

<style scoped>
	.nav-right {
		line-height: 0.9rem;
		padding-top: 0.1rem;
		box-sizing: border-box;
		padding-right: 0.3rem;
	}
	
	.nav-right span {
		margin-left: 0.3rem;
	}
	
	.gotop1 {
		display: inline-block;
		width: 0.7rem;
		height: 0.7rem;
		border-radius: 50%;
		background: #fff;
		background: url(../../../../static/image/2019-01-03_174735_03.png) no-repeat;
		background-size: 0.71rem 0.71rem;
	}
	
	.gotop2 {
		display: inline-block;
		width: 0.7rem;
		height: 0.7rem;
		border-radius: 50%;
		background: #fff;
		background: url(../../../../static/image/2019-01-03_174735_05.png) no-repeat;
		background-size: 0.71rem 0.71rem;
	}
	
	.person-phone-bg {
		display: inline-block;
		width: 0.7rem;
		height: 0.7rem;
		border-radius: 50%;
		background: #fff;
		position: absolute;
		top: 0.1rem;
		right: 0.1rem;
		z-index: 1;
	}
	
	.person-phone {
		display: inline-block;
		width: 0.7rem;
		height: 0.7rem;
		border-radius: 50%;
		background: #fff;
		position: absolute;
		top: 0.1rem;
		right: 0.1rem;
		background: url(../../../../static/image/icons_03.png) no-repeat;
		background-size: 0.5rem 0.5rem;
		background-position: 0.1rem 0.1rem;
		z-index: 2;
	}
	
	.nav-left {
		width: 2.1rem;
		height: 100%;
		background: #fdd44a;
		line-height: 0.9rem;
		font-size: 0.25rem;
		color: #fff;
		border-bottom-right-radius: 20px;
		border-top-right-radius: 20px;
		position: relative;
		padding-left: 0.1rem;
		box-sizing: border-box;
	}
	
	.nav {
		width: 100%;
		height: 0.9rem;
		position: fixed;
		bottom: 0.3rem;
		display: flex;
		justify-content: space-between;
		z-index: 9999999;
	}
</style>